<template>
  <view class="forgot-container">
    <view class="page-header">
      <view class="header-left" @click="goBack">
        <u-icon name="arrow-left" size="20" color="#333"></u-icon>
        <text>返回</text>
      </view>
      <view class="header-title">忘记密码</view>
      <view class="header-right"></view>
    </view>
    
    <view class="content">
      <view class="step-indicator">
        <view class="step" :class="{active: currentStep >= 1}">
          <view class="step-number">1</view>
          <text class="step-text">验证身份</text>
        </view>
        <view class="step-line" :class="{active: currentStep >= 2}"></view>
        <view class="step" :class="{active: currentStep >= 2}">
          <view class="step-number">2</view>
          <text class="step-text">重置密码</text>
        </view>
        <view class="step-line" :class="{active: currentStep >= 3}"></view>
        <view class="step" :class="{active: currentStep >= 3}">
          <view class="step-number">3</view>
          <text class="step-text">完成</text>
        </view>
      </view>
      
      <!-- 步骤1：验证身份 -->
      <view v-if="currentStep === 1" class="step-content">
        <view class="form-section">
          <view class="form-item">
            <view class="form-label">姓名</view>
            <view class="form-input-group">
              <input class="form-input" v-model="formData.name" placeholder="请输入姓名" />
            </view>
          </view>
          
          <view class="form-item">
            <view class="form-label">身份证号</view>
            <view class="form-input-group">
              <input class="form-input" v-model="formData.idNumber" placeholder="请输入身份证号" maxlength="18" />
            </view>
          </view>
          
          <view class="form-item">
            <view class="form-label">交易密码</view>
            <view class="form-input-group">
              <input class="form-input" v-model="formData.oldPassword" placeholder="请输入原交易密码" type="password" maxlength="6" inputmode="numeric" pattern="[0-9]*" />
            </view>
          </view>
        </view>
        
        <button class="action-btn" @click="verifyIdentity">下一步</button>
      </view>
      
      <!-- 步骤2：重置密码 -->
      <view v-if="currentStep === 2" class="step-content">
        <view class="form-section">
          <view class="form-item">
            <view class="form-label">新交易密码</view>
            <view class="form-input-group">
              <input 
                class="form-input" 
                v-model="formData.password" 
                placeholder="请设置新的6位交易密码" 
                :type="showPassword ? 'text' : 'password'" 
                maxlength="6" 
                inputmode="numeric"
                pattern="[0-9]*"
              />
              <view class="eye-icon" @click="togglePasswordVisibility">
                <u-icon :name="showPassword ? 'eye' : 'eye-off'" size="24" color="#999"></u-icon>
              </view>
            </view>
          </view>
          
          <view class="form-item">
            <view class="form-label">确认新密码</view>
            <view class="form-input-group">
              <input 
                class="form-input" 
                v-model="formData.confirmPassword" 
                placeholder="请再次输入新交易密码" 
                :type="showConfirmPassword ? 'text' : 'password'" 
                maxlength="6" 
                inputmode="numeric"
                pattern="[0-9]*"
              />
              <view class="eye-icon" @click="toggleConfirmPasswordVisibility">
                <u-icon :name="showConfirmPassword ? 'eye' : 'eye-off'" size="24" color="#999"></u-icon>
              </view>
            </view>
          </view>
          
          <view class="password-tips">
            <u-icon name="info-circle" size="16" color="#999"></u-icon>
            <text class="tip-text">交易密码为6位数字</text>
          </view>
        </view>
        
        <button class="action-btn" @click="resetPassword">确认重置</button>
      </view>
      
      <!-- 步骤3：完成 -->
      <view v-if="currentStep === 3" class="step-content">
        <view class="success-section">
          <view class="success-icon">
            <u-icon name="checkmark-circle" size="80" color="#07c160"></u-icon>
          </view>
          <view class="success-title">密码重置成功</view>
          <view class="success-desc">您的密码已重置成功，请使用新密码登录</view>
        </view>
        
        <button class="action-btn" @click="goToLogin">立即登录</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentStep: 1,
      showPassword: false,
      showConfirmPassword: false,
      formData: {
        name: '',
        idNumber: '',
        oldPassword: '',
        password: '',
        confirmPassword: ''
      }
    }
  },
  methods: {
    goBack() {
      if (this.currentStep === 3) {
        uni.reLaunch({
          url: '/pages/login/index'
        });
      } else {
        uni.navigateBack();
      }
    },
    
    togglePasswordVisibility() {
      this.showPassword = !this.showPassword;
    },
    
    toggleConfirmPasswordVisibility() {
      this.showConfirmPassword = !this.showConfirmPassword;
    },
    checkIdNumber(idNumber) {
        // 正则表达式验证身份证格式
        const reg = /^(?:\d{15}|\d{17}[\dX])$/;
        if (!reg.test(idNumber)) {
            console.error('身份证号码格式不正确');
            return false;
        }

        // 如果是18位身份证，进行校验位验证
        if (idNumber.length === 18) {
            const weights = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
            const checkDigits = '10X98765432';
            let sum = 0;

            for (let i = 0; i < 17; i++) {
                sum += idNumber[i] * weights[i];
            }

            const checkDigit = checkDigits[sum % 11];
            if (checkDigit !== idNumber[17]) {
                console.error('身份证号码校验位不正确');
                return false;
            }
        }

        console.log('身份证号码有效');
        return true;
    },
    verifyIdentity() {
      if (!this.formData.name) {
        return uni.showToast({
          title: '请输入姓名',
          icon: 'none'
        });
      }
      
      if (!this.formData.idNumber || !this.checkIdNumber(this.formData.idNumber)) {
        return uni.showToast({
          title: '请输入正确的身份证号',
          icon: 'none'
        });
      }
      
      if (!this.formData.oldPassword || this.formData.oldPassword.length !== 6) {
        return uni.showToast({
          title: '请输入正确的交易密码',
          icon: 'none'
        });
      }
      
      // 模拟验证
      uni.showLoading({
        title: '验证中...'
      });
      
      setTimeout(() => {
        uni.hideLoading();
        this.currentStep = 2;
      }, 1500);
    },
    
    resetPassword() {
      if (!this.formData.password) {
        return uni.showToast({
          title: '请设置新交易密码',
          icon: 'none'
        });
      }
      
      if (this.formData.password.length !== 6) {
        return uni.showToast({
          title: '交易密码必须为6位数字',
          icon: 'none'
        });
      }
      
      if (!this.formData.confirmPassword) {
        return uni.showToast({
          title: '请确认新交易密码',
          icon: 'none'
        });
      }
      
      if (this.formData.password !== this.formData.confirmPassword) {
        return uni.showToast({
          title: '两次输入的密码不一致',
          icon: 'none'
        });
      }
      
      // 模拟重置密码
      uni.showLoading({
        title: '重置中...'
      });
      
      setTimeout(() => {
        uni.hideLoading();
        this.currentStep = 3;
      }, 1500);
    },
    
    goToLogin() {
      uni.reLaunch({
        url: '/pages/login/index'
      });
    }
  }
}
</script>

<style lang="scss">
.forgot-container {
  min-height: 100vh;
  background-color: #f7f7f7;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 90rpx;
  background-color: #fff;
  padding: 0 30rpx;
  border-bottom: 1px solid #f0f0f0;
}

.header-left {
  display: flex;
  align-items: center;
}

.header-left text {
  margin-left: 10rpx;
  font-size: 28rpx;
  color: #333;
}

.header-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
}

.header-right {
  width: 60rpx;
}

.content {
  padding: 30rpx;
}

.step-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 50rpx;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.step-number {
  width: 50rpx;
  height: 50rpx;
  border-radius: 50%;
  background-color: #ddd;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26rpx;
  margin-bottom: 10rpx;
}

.step.active .step-number {
  background-color: #1989fa;
}

.step-text {
  font-size: 24rpx;
  color: #999;
}

.step.active .step-text {
  color: #1989fa;
}

.step-line {
  width: 100rpx;
  height: 2rpx;
  background-color: #ddd;
  margin: 0 15rpx;
  margin-bottom: 30rpx;
}

.step-line.active {
  background-color: #1989fa;
}

.form-section {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}

.form-item {
  margin-bottom: 30rpx;
}

.form-item:last-child {
  margin-bottom: 0;
}

.form-label {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 15rpx;
}

.form-input-group {
  display: flex;
  align-items: center;
}

.form-input {
  flex: 1;
  height: 80rpx;
  background-color: #f9f9f9;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  color: #333;
}

.eye-icon {
  padding: 0 20rpx;
}

.verify-code-btn {
  width: 200rpx;
  height: 80rpx;
  background-color: #1989fa;
  color: #fff;
  font-size: 26rpx;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 20rpx;
}

.verify-code-btn.disabled {
  background-color: #ccc;
}

.password-tips {
  display: flex;
  align-items: flex-start;
  margin-top: 20rpx;
}

.tip-text {
  font-size: 24rpx;
  color: #999;
  margin-left: 10rpx;
  flex: 1;
}

.action-btn {
  height: 90rpx;
  background-color: #1989fa;
  color: #fff;
  font-size: 30rpx;
  font-weight: 500;
  border-radius: 45rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 50rpx 0 30rpx;
}

.success-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 50rpx 0;
}

.success-icon {
  margin-bottom: 30rpx;
}

.success-title {
  font-size: 36rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 20rpx;
}

.success-desc {
  font-size: 28rpx;
  color: #999;
}
</style> 